<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <Button position="right" icon="dropDown" :loading="loading">{{ label }}</Button>
      <!-- {{ label }}<i class="el-icon-arrow-down el-icon--right" /> -->
    </span>
    <el-dropdown-menu slot="dropdown">
      <template v-for="(item, index) in dropList">
        <template v-if="$parent[item.handlerClick]">
          <el-dropdown-item :key="index">
            <span @click="$parent[item.handlerClick]">
              {{
                item.label
              }}
            </span>
          </el-dropdown-item>
        </template>
        <template v-else>
          <el-dropdown-item :key="index" @click.native="item.handlerClick">{{ item.label }}</el-dropdown-item>
        </template>
      </template>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<script>
export default {
  name: 'DropDown',
  // eslint-disable-next-line vue/require-prop-types
  props: ['label', 'dropList', 'loading']
}
</script>
<style>
.el-dropdown-link{
  cursor: pointer;
}
Button {
  margin: 0px 5px;
  height: 27px;
  margin-top: -1px;
}
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover{
  background-color: #217dfa;
  color: #fff;
}

</style>
